<template>
  <header class="top-content">
    <div class="search-border">
      <input type="text" v-model="searchValue">
      <button @click="search">
        <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" class="tO5FPupE">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M7.875 1.5a6.375 6.375 0 103.642 11.608l3.063 3.063a1.125 1.125 0 001.59-1.591l-3.062-3.063A6.375 6.375 0 007.875 1.5zM3.75 7.875a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0z"
            fill="#4F5168"></path>
        </svg>
        <span class="button-text">搜索</span>
      </button>
    </div>
    <div class="header-menu" @click="showLoginModal" v-if="!isLogin">
      <button class="menu-button">
        <span class="menu-button-content">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" class="" viewBox="0 0 20 20"
            id="svg_icon_avatar">
            <rect width="20" height="20" rx="10" fill="#fff" fill-opacity="0.3"></rect>
            <path
              d="M2.494 16.607A9.976 9.976 0 0110 13.214a9.976 9.976 0 017.507 3.393A9.976 9.976 0 0110 20a9.976 9.976 0 01-7.506-3.393zM13.572 8.214a3.571 3.571 0 11-7.143 0 3.571 3.571 0 017.143 0z"
              fill="#fff"></path>
          </svg>
          <p class="header-menu-login">登录</p>
        </span>
      </button>
    </div>
    <div class="function-box">
      <div class="school-name">
        <el-icon class="school-icon">
          <School />
        </el-icon>
        <span class="school-text">{{ schoolName || '请选择学校' }}</span>
      </div>
      <button class="menu-button" @click="showUploadModal">
        <span class="menu-button-content">
          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="xhLouUc0"
            viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M11.349 5.17h-.033c-1.068 0-1.915 0-2.598.054-.698.056-1.29.172-1.832.441a4.75 4.75 0 0 0-2.14 2.14c-.269.542-.386 1.134-.441 1.832-.055.683-.055 1.53-.055 2.599v.064c0 1.069 0 1.916.055 2.599.055.698.172 1.29.441 1.831a4.75 4.75 0 0 0 2.14 2.14c.542.27 1.134.386 1.832.442.683.055 1.53.055 2.598.055H12.684c1.068 0 1.915 0 2.598-.055.698-.056 1.29-.172 1.832-.442a4.75 4.75 0 0 0 2.14-2.14c.269-.541.386-1.133.441-1.831.055-.683.055-1.53.055-2.599v-.064c0-1.069 0-1.916-.055-2.599-.055-.698-.172-1.29-.441-1.832a4.75 4.75 0 0 0-2.14-2.14c-.542-.269-1.134-.385-1.832-.441-.683-.055-1.53-.055-2.598-.055h-1.335zM7.554 7.008c.299-.149.676-.241 1.284-.29.616-.05 1.403-.05 2.51-.05h1.303c1.108 0 1.895 0 2.511.05.608.049.985.141 1.284.29a3.25 3.25 0 0 1 1.464 1.464c.15.3.241.676.29 1.284.05.616.05 1.403.05 2.51 0 1.109 0 1.896-.05 2.512-.049.608-.14.985-.29 1.284a3.25 3.25 0 0 1-1.464 1.464c-.299.149-.676.241-1.284.29-.616.05-1.403.05-2.51.05h-1.303c-1.108 0-1.895 0-2.511-.05-.608-.049-.985-.141-1.284-.29a3.25 3.25 0 0 1-1.464-1.464c-.15-.3-.242-.676-.29-1.284-.05-.616-.05-1.403-.05-2.511s0-1.895.05-2.511c.048-.608.14-.985.29-1.284a3.25 3.25 0 0 1 1.464-1.464zm3.696 8.259v-2.25H9v-1.5h2.25v-2.25h1.5v2.25H15v1.5h-2.25v2.25h-1.5z"
              fill="#fff"></path>
          </svg>
          <p class="header-menu-login">发布</p>
        </span>
      </button>
      <el-avatar class="avatar" @error="() => true" v-show="avatar_url">
        <img :src=avatar_url />
      </el-avatar>
    </div>
  </header>
  <UploadVideo ref="uploadVideo"></UploadVideo>
</template>

<script>
import UploadVideo from '@/components/uploadVideo/index.vue'
import { School } from '@element-plus/icons-vue'

export default {
  components: {
    UploadVideo,
    School
  },
  data() {
    return {
      searchValue: ''
    }
  },
  computed: {
    avatar_url: {
      get() {
        return this.$store.state.user.avatar_url
      }
    },
    isLogin: {
      get() { return this.$store.state.user.isLogin }
    },
    schoolName: {
      get() { return this.$store.state.user.school_name }
    }
  },
  mounted() {
    console.log('登陆状态', this.isLogin)
  },
  methods: {
    showLoginModal() {
      this.$store.commit('user/CHANGE_DIALOG_STATE')
    },
    showUploadModal() {
      this.$refs.uploadVideo.showUploadModal()
    },
    async search() {
      if (this.$route.path === '/home') {
        await this.$router.push('/temp')
        this.$router.replace({
          path: '/home',
          query: { search: this.searchValue }
        })
      } else {
        this.$router.push({
          path: '/home',
          query: { search: this.searchValue }
        })
      }
    }
  }
}
</script>

<style scoped>
.top-content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
.function-box {
  margin-left: 25px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.avatar {
  width: 38px;
  height: 38px;
  margin-left: 25px;
  border-radius: 16px;
  cursor: pointer;
}
.header-menu {
  margin-left: 25px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
}
.menu-button {
  width: 88px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border:none;
  border-radius:12px;
  background-color: #fe2c55;
  transition: all 0.3s;
  padding:6px 16px;
  cursor: pointer;
}
.menu-button:hover {
  background-color: rgb(210, 27, 70)
}
.menu-button-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-menu-login {
  width: 32px;
  height: 23px;
  color: #fff;
  line-height:23px;
  margin:0 0 0 5px;
  font-size: 16px;
  font-weight: 500;
}
.search-border{
  display: flex;
  box-sizing: border-box;
  width: 520px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  overflow: hidden;
}
.search-border:hover {
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.search-border:hover button{
  background-color: #fff;
}
.search-border:hover .button-text,
.search-border:hover button svg path{
  color: black;
  fill: black
}
.search-border input {
  box-sizing: border-box;
  width: 447px;
  height: 36px;
  padding: 0 12px;
  border: none;
  outline: none;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.7);
}
.search-border input:focus,
.search-border input:hover {
  cursor: text;
  caret-color: red;
  border: none;
}
.search-border button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 69px;
  height: 36px;
  cursor: pointer;
  border: none;
  background-color: transparent;
}
.search-border button svg path {
  fill: white;
}
.button-text {
  margin-left: 3px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: white;
}
.school-name {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-right: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.school-name:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.school-icon {
  font-size: 20px;
  color: #fff;
  margin-right: 8px;
}
.school-text {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.school-name:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.15);
}
</style>